import React, { FC } from 'react'
import styled from "styled-components"
import * as echarts from 'echarts'
import { ECharts } from 'echarts'
import { ITransportList } from '@/types/pages/logistics/interface'
import Title from '@/components/pages/titleTop' 
import { observer } from 'mobx-react'

const Table = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    padding:3rem;  
    .content{ 
      padding-top: 5rem;
      height: 100%;
      .title{
        height: 4.7rem;
        display: flex; 
        padding-right: 3rem;
        padding-left: 3rem;
        font-weight: bold;
        span{
          flex:1;
          text-align: center;
          color:#fff;
          height: 4.7rem;
          line-height:  4.7rem;
          background-color: #0B4699;
          
        }
      }
      .list{
        height: 30rem; 
        overflow-y: scroll; 
        .row{
          height: 4.7rem;
          flex:1;
          display: flex;
          flex-direction: row;
          color:#fff;
          text-align: center; 
          padding-right: 3rem; 
          padding-left: 3rem; 
          span{
            flex:1;  
            text-align: center;
            height: 4.7rem;
            line-height:  4.7rem;
            background-color: #061F4F;
          }
       
       
        }
        .row2{
          span{
            background-color: #08326B;
          }
          }
      } 
    }
  `

const Content: FC<ITransportList> = function (props) {
  return (
    <Table>
      <Title name={props.name!} top="" />
      <div className="content">
        <div className='title'>
          <span>库</span>
          <span>到达量</span>
          <span>发运量</span>
          <span>库存量</span>
        </div>
        <div className='list'>
          {props.list?props.list.map((val,key) => <div key={key} className={`row ${key%2===0?'':'row2'}`}>
            <span>{val.name}</span>
            <span>{val.toAmount}</span>
            <span>{val.sendAmonut}</span>
            <span>{val.storeAmount}</span>
          </div>):null}
        </div>

      </div>
    </Table>
  )
}

export default observer(Content) 
